{
 "cells": [
  {
   "cell_type": "code",
   "execution_count": 13,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "<script type=\"text/javascript\">window.PlotlyConfig = {MathJaxConfig: 'local'};</script><script type=\"text/javascript\">if (window.MathJax) {MathJax.Hub.Config({SVG: {font: \"STIX-Web\"}});}</script><script>requirejs.config({paths: { 'plotly': ['https://cdn.plot.ly/plotly-latest.min']},});if(!window._Plotly) {require(['plotly'],function(plotly) {window._Plotly=plotly;});}</script>"
      ],
      "text/vnd.plotly.v1+html": [
       "<script type=\"text/javascript\">window.PlotlyConfig = {MathJaxConfig: 'local'};</script><script type=\"text/javascript\">if (window.MathJax) {MathJax.Hub.Config({SVG: {font: \"STIX-Web\"}});}</script><script>requirejs.config({paths: { 'plotly': ['https://cdn.plot.ly/plotly-latest.min']},});if(!window._Plotly) {require(['plotly'],function(plotly) {window._Plotly=plotly;});}</script>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "import plotly\n",
    "import plotly.graph_objs as go\n",
    "plotly.offline.init_notebook_mode(connected=True)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# Basic Line Plots"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 14,
   "metadata": {
    "scrolled": false
   },
   "outputs": [
    {
     "data": {
      "application/vnd.plotly.v1+json": {
       "config": {
        "linkText": "Export to plot.ly",
        "plotlyServerURL": "https://plot.ly",
        "showLink": true
       },
       "data": [
        {
         "connectgaps": false,
         "line": {
          "color": "rgb(205, 12, 24)",
          "width": 4
         },
         "mode": "lines",
         "name": "High 2014",
         "showlegend": true,
         "type": "scatter",
         "uid": "2c78497a-5d08-49bb-ac60-dd8ae8bd729a",
         "x": [
          "January",
          "February",
          "March",
          "April",
          "May",
          "June",
          "July",
          "August",
          "September",
          "October",
          "November",
          "December"
         ],
         "y": [
          28.8,
          28.5,
          null,
          40,
          69.7,
          79.7,
          78.5,
          77.8,
          null,
          62.6,
          45.3,
          39.9
         ]
        },
        {
         "line": {
          "color": "rgb(25, 120, 24)",
          "dash": "dash",
          "width": 4
         },
         "name": "High 2007",
         "type": "scatter",
         "uid": "5ad15ae3-029a-4176-80e4-ab4357cc8196",
         "x": [
          "January",
          "February",
          "March",
          "April",
          "May",
          "June",
          "July",
          "August",
          "September",
          "October",
          "November",
          "December"
         ],
         "y": [
          36.5,
          26.6,
          43.6,
          52.3,
          71.5,
          81.4,
          80.5,
          82.2,
          76,
          67.3,
          46.1,
          35
         ]
        },
        {
         "line": {
          "color": "rgb(25, 12, 204)",
          "dash": "dot",
          "width": 4
         },
         "name": "High 2000",
         "type": "scatter",
         "uid": "b3ab7e90-cbef-4ba0-974a-037b28e073bf",
         "x": [
          "January",
          "February",
          "March",
          "April",
          "May",
          "June",
          "July",
          "August",
          "September",
          "October",
          "November",
          "December"
         ],
         "y": [
          32.5,
          37.6,
          49.9,
          53,
          69.1,
          75.4,
          76.5,
          76.6,
          70.7,
          60.6,
          45.1,
          29.3
         ]
        }
       ],
       "layout": {
        "title": "Average High and Low Temperatures in New York",
        "xaxis": {
         "title": "Month"
        },
        "yaxis": {
         "title": "Temperature (degrees F)"
        }
       }
      },
      "text/html": [
       "<div id=\"fe27c983-c235-46d1-b9ac-a57658bee4ac\" style=\"height: 525px; width: 100%;\" class=\"plotly-graph-div\"></div><script type=\"text/javascript\">require([\"plotly\"], function(Plotly) { window.PLOTLYENV=window.PLOTLYENV || {};window.PLOTLYENV.BASE_URL=\"https://plot.ly\";Plotly.newPlot(\"fe27c983-c235-46d1-b9ac-a57658bee4ac\", [{\"connectgaps\": false, \"line\": {\"color\": \"rgb(205, 12, 24)\", \"width\": 4}, \"mode\": \"lines\", \"name\": \"High 2014\", \"showlegend\": true, \"x\": [\"January\", \"February\", \"March\", \"April\", \"May\", \"June\", \"July\", \"August\", \"September\", \"October\", \"November\", \"December\"], \"y\": [28.8, 28.5, null, 40.0, 69.7, 79.7, 78.5, 77.8, null, 62.6, 45.3, 39.9], \"type\": \"scatter\", \"uid\": \"9274c318-49b8-4f1a-b6b0-ba2a1290c466\"}, {\"line\": {\"color\": \"rgb(25, 120, 24)\", \"dash\": \"dash\", \"width\": 4}, \"name\": \"High 2007\", \"x\": [\"January\", \"February\", \"March\", \"April\", \"May\", \"June\", \"July\", \"August\", \"September\", \"October\", \"November\", \"December\"], \"y\": [36.5, 26.6, 43.6, 52.3, 71.5, 81.4, 80.5, 82.2, 76.0, 67.3, 46.1, 35.0], \"type\": \"scatter\", \"uid\": \"70c96fa7-5598-4800-b8ed-f066f912f370\"}, {\"line\": {\"color\": \"rgb(25, 12, 204)\", \"dash\": \"dot\", \"width\": 4}, \"name\": \"High 2000\", \"x\": [\"January\", \"February\", \"March\", \"April\", \"May\", \"June\", \"July\", \"August\", \"September\", \"October\", \"November\", \"December\"], \"y\": [32.5, 37.6, 49.9, 53.0, 69.1, 75.4, 76.5, 76.6, 70.7, 60.6, 45.1, 29.3], \"type\": \"scatter\", \"uid\": \"18ccd737-08ef-491c-a019-eece348eb706\"}], {\"title\": \"Average High and Low Temperatures in New York\", \"xaxis\": {\"title\": \"Month\"}, \"yaxis\": {\"title\": \"Temperature (degrees F)\"}}, {\"showLink\": true, \"linkText\": \"Export to plot.ly\", \"plotlyServerURL\": \"https://plot.ly\"})});</script><script type=\"text/javascript\">window.addEventListener(\"resize\", function(){window._Plotly.Plots.resize(document.getElementById(\"fe27c983-c235-46d1-b9ac-a57658bee4ac\"));});</script>"
      ],
      "text/vnd.plotly.v1+html": [
       "<div id=\"fe27c983-c235-46d1-b9ac-a57658bee4ac\" style=\"height: 525px; width: 100%;\" class=\"plotly-graph-div\"></div><script type=\"text/javascript\">require([\"plotly\"], function(Plotly) { window.PLOTLYENV=window.PLOTLYENV || {};window.PLOTLYENV.BASE_URL=\"https://plot.ly\";Plotly.newPlot(\"fe27c983-c235-46d1-b9ac-a57658bee4ac\", [{\"connectgaps\": false, \"line\": {\"color\": \"rgb(205, 12, 24)\", \"width\": 4}, \"mode\": \"lines\", \"name\": \"High 2014\", \"showlegend\": true, \"x\": [\"January\", \"February\", \"March\", \"April\", \"May\", \"June\", \"July\", \"August\", \"September\", \"October\", \"November\", \"December\"], \"y\": [28.8, 28.5, null, 40.0, 69.7, 79.7, 78.5, 77.8, null, 62.6, 45.3, 39.9], \"type\": \"scatter\", \"uid\": \"9274c318-49b8-4f1a-b6b0-ba2a1290c466\"}, {\"line\": {\"color\": \"rgb(25, 120, 24)\", \"dash\": \"dash\", \"width\": 4}, \"name\": \"High 2007\", \"x\": [\"January\", \"February\", \"March\", \"April\", \"May\", \"June\", \"July\", \"August\", \"September\", \"October\", \"November\", \"December\"], \"y\": [36.5, 26.6, 43.6, 52.3, 71.5, 81.4, 80.5, 82.2, 76.0, 67.3, 46.1, 35.0], \"type\": \"scatter\", \"uid\": \"70c96fa7-5598-4800-b8ed-f066f912f370\"}, {\"line\": {\"color\": \"rgb(25, 12, 204)\", \"dash\": \"dot\", \"width\": 4}, \"name\": \"High 2000\", \"x\": [\"January\", \"February\", \"March\", \"April\", \"May\", \"June\", \"July\", \"August\", \"September\", \"October\", \"November\", \"December\"], \"y\": [32.5, 37.6, 49.9, 53.0, 69.1, 75.4, 76.5, 76.6, 70.7, 60.6, 45.1, 29.3], \"type\": \"scatter\", \"uid\": \"18ccd737-08ef-491c-a019-eece348eb706\"}], {\"title\": \"Average High and Low Temperatures in New York\", \"xaxis\": {\"title\": \"Month\"}, \"yaxis\": {\"title\": \"Temperature (degrees F)\"}}, {\"showLink\": true, \"linkText\": \"Export to plot.ly\", \"plotlyServerURL\": \"https://plot.ly\"})});</script><script type=\"text/javascript\">window.addEventListener(\"resize\", function(){window._Plotly.Plots.resize(document.getElementById(\"fe27c983-c235-46d1-b9ac-a57658bee4ac\"));});</script>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "month = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']\n",
    "high_2000 = [32.5, 37.6, 49.9, 53.0, 69.1, 75.4, 76.5, 76.6, 70.7, 60.6, 45.1, 29.3]\n",
    "high_2007 = [36.5, 26.6, 43.6, 52.3, 71.5, 81.4, 80.5, 82.2, 76.0, 67.3, 46.1, 35.0]\n",
    "high_2014 = [28.8, 28.5, None, 40.0, 69.7, 79.7, 78.5, 77.8, None, 62.6, 45.3, 39.9]\n",
    "\n",
    "trace0 = go.Scatter(\n",
    "    x = month,\n",
    "    y = high_2014,\n",
    "    name = 'High 2014',\n",
    "    # 默认为lines\n",
    "    mode = 'lines',    \n",
    "    # 是否连接Gap，图中红色会有缺失部分\n",
    "    connectgaps = False,\n",
    "    # 是否显示legend\n",
    "    showlegend = True,\n",
    "    # 设置线的样式\n",
    "    line = dict(\n",
    "        color='rgb(205, 12, 24)', \n",
    "        width=4\n",
    "    )\n",
    ")\n",
    "trace1 = go.Scatter(\n",
    "    x = month,\n",
    "    y = high_2007,\n",
    "    name = 'High 2007',\n",
    "    line = dict(\n",
    "        color='rgb(25, 120, 24)', \n",
    "        width=4, \n",
    "        dash='dash'\n",
    "        # dash options include 'dash', 'dot', and 'dashdot'\n",
    "    ) \n",
    ")\n",
    "trace2 = go.Scatter(\n",
    "    x = month,\n",
    "    y = high_2000,\n",
    "    name = 'High 2000',\n",
    "    line = dict(\n",
    "        color='rgb(25, 12, 204)', \n",
    "        width=4, \n",
    "        dash='dot'\n",
    "    )\n",
    ")\n",
    "\n",
    "data = [trace0, trace1, trace2]\n",
    "layout = dict(\n",
    "    title = 'Average High and Low Temperatures in New York',\n",
    "    xaxis = dict(title = 'Month'),\n",
    "    yaxis = dict(title = 'Temperature (degrees F)'),\n",
    ")\n",
    "fig = dict(data=data, layout=layout)\n",
    "plotly.offline.iplot(fig, filename='styled-line')"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# Interpolation with Line Plots"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 15,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/vnd.plotly.v1+json": {
       "config": {
        "linkText": "Export to plot.ly",
        "plotlyServerURL": "https://plot.ly",
        "showLink": true
       },
       "data": [
        {
         "hoverinfo": "name",
         "line": {
          "shape": "linear"
         },
         "mode": "lines+markers",
         "name": "'linear'",
         "type": "scatter",
         "uid": "a8d14474-e3f8-44dd-9bc5-6cc53883c5dd",
         "x": [
          1,
          2,
          3,
          4,
          5
         ],
         "y": [
          1,
          3,
          2,
          3,
          1
         ]
        },
        {
         "hoverinfo": "text+name",
         "line": {
          "shape": "spline"
         },
         "mode": "lines+markers",
         "name": "'spline'",
         "text": [
          "tweak line smoothness<br>with 'smoothing' in line object"
         ],
         "type": "scatter",
         "uid": "57795ba3-cb50-4d97-b1d6-509b2d4f2261",
         "x": [
          1,
          2,
          3,
          4,
          5
         ],
         "y": [
          6,
          8,
          7,
          8,
          6
         ]
        },
        {
         "hoverinfo": "name",
         "line": {
          "shape": "vhv"
         },
         "mode": "lines+markers",
         "name": "'vhv'",
         "type": "scatter",
         "uid": "3f70f68c-5a86-4f75-95ee-1c3d29531d3e",
         "x": [
          1,
          2,
          3,
          4,
          5
         ],
         "y": [
          11,
          13,
          12,
          13,
          11
         ]
        },
        {
         "hoverinfo": "name",
         "line": {
          "shape": "hvh"
         },
         "mode": "lines+markers",
         "name": "'hvh'",
         "type": "scatter",
         "uid": "808e1f55-a5e4-40fe-98d0-b7c0f5dd660c",
         "x": [
          1,
          2,
          3,
          4,
          5
         ],
         "y": [
          16,
          18,
          17,
          18,
          16
         ]
        },
        {
         "hoverinfo": "name",
         "line": {
          "shape": "vh"
         },
         "mode": "lines+markers",
         "name": "'vh'",
         "type": "scatter",
         "uid": "a5e99eca-d341-4f56-ba98-34e2e3eb34d8",
         "x": [
          1,
          2,
          3,
          4,
          5
         ],
         "y": [
          21,
          23,
          22,
          23,
          21
         ]
        },
        {
         "hoverinfo": "name",
         "line": {
          "shape": "hv"
         },
         "mode": "lines+markers",
         "name": "'hv'",
         "type": "scatter",
         "uid": "6847c52d-8d96-4a90-b45f-dd7ccb57772c",
         "x": [
          1,
          2,
          3,
          4,
          5
         ],
         "y": [
          26,
          28,
          27,
          28,
          26
         ]
        }
       ],
       "layout": {
        "legend": {
         "font": {
          "size": 15
         },
         "traceorder": "reversed",
         "y": 0.5
        }
       }
      },
      "text/html": [
       "<div id=\"ebbfa27e-4e85-4c40-8bbf-dc485788f418\" style=\"height: 525px; width: 100%;\" class=\"plotly-graph-div\"></div><script type=\"text/javascript\">require([\"plotly\"], function(Plotly) { window.PLOTLYENV=window.PLOTLYENV || {};window.PLOTLYENV.BASE_URL=\"https://plot.ly\";Plotly.newPlot(\"ebbfa27e-4e85-4c40-8bbf-dc485788f418\", [{\"hoverinfo\": \"name\", \"line\": {\"shape\": \"linear\"}, \"mode\": \"lines+markers\", \"name\": \"'linear'\", \"x\": [1, 2, 3, 4, 5], \"y\": [1, 3, 2, 3, 1], \"type\": \"scatter\", \"uid\": \"7daf8ee7-776b-41f5-89b3-0c58b7ea3dba\"}, {\"hoverinfo\": \"text+name\", \"line\": {\"shape\": \"spline\"}, \"mode\": \"lines+markers\", \"name\": \"'spline'\", \"text\": [\"tweak line smoothness<br>with 'smoothing' in line object\"], \"x\": [1, 2, 3, 4, 5], \"y\": [6, 8, 7, 8, 6], \"type\": \"scatter\", \"uid\": \"310b9cb4-f2f0-4b84-98e3-931f3f759086\"}, {\"hoverinfo\": \"name\", \"line\": {\"shape\": \"vhv\"}, \"mode\": \"lines+markers\", \"name\": \"'vhv'\", \"x\": [1, 2, 3, 4, 5], \"y\": [11, 13, 12, 13, 11], \"type\": \"scatter\", \"uid\": \"fe8b728a-d432-452d-88fe-b057bc2edfbc\"}, {\"hoverinfo\": \"name\", \"line\": {\"shape\": \"hvh\"}, \"mode\": \"lines+markers\", \"name\": \"'hvh'\", \"x\": [1, 2, 3, 4, 5], \"y\": [16, 18, 17, 18, 16], \"type\": \"scatter\", \"uid\": \"86646d7c-54cd-4828-9d69-f8359737d9e4\"}, {\"hoverinfo\": \"name\", \"line\": {\"shape\": \"vh\"}, \"mode\": \"lines+markers\", \"name\": \"'vh'\", \"x\": [1, 2, 3, 4, 5], \"y\": [21, 23, 22, 23, 21], \"type\": \"scatter\", \"uid\": \"1da58d31-b66e-4a38-8dee-41482a309f8f\"}, {\"hoverinfo\": \"name\", \"line\": {\"shape\": \"hv\"}, \"mode\": \"lines+markers\", \"name\": \"'hv'\", \"x\": [1, 2, 3, 4, 5], \"y\": [26, 28, 27, 28, 26], \"type\": \"scatter\", \"uid\": \"f0511e68-b870-4ea7-bdc8-334abfa5f43b\"}], {\"legend\": {\"font\": {\"size\": 15}, \"traceorder\": \"reversed\", \"y\": 0.5}}, {\"showLink\": true, \"linkText\": \"Export to plot.ly\", \"plotlyServerURL\": \"https://plot.ly\"})});</script><script type=\"text/javascript\">window.addEventListener(\"resize\", function(){window._Plotly.Plots.resize(document.getElementById(\"ebbfa27e-4e85-4c40-8bbf-dc485788f418\"));});</script>"
      ],
      "text/vnd.plotly.v1+html": [
       "<div id=\"ebbfa27e-4e85-4c40-8bbf-dc485788f418\" style=\"height: 525px; width: 100%;\" class=\"plotly-graph-div\"></div><script type=\"text/javascript\">require([\"plotly\"], function(Plotly) { window.PLOTLYENV=window.PLOTLYENV || {};window.PLOTLYENV.BASE_URL=\"https://plot.ly\";Plotly.newPlot(\"ebbfa27e-4e85-4c40-8bbf-dc485788f418\", [{\"hoverinfo\": \"name\", \"line\": {\"shape\": \"linear\"}, \"mode\": \"lines+markers\", \"name\": \"'linear'\", \"x\": [1, 2, 3, 4, 5], \"y\": [1, 3, 2, 3, 1], \"type\": \"scatter\", \"uid\": \"7daf8ee7-776b-41f5-89b3-0c58b7ea3dba\"}, {\"hoverinfo\": \"text+name\", \"line\": {\"shape\": \"spline\"}, \"mode\": \"lines+markers\", \"name\": \"'spline'\", \"text\": [\"tweak line smoothness<br>with 'smoothing' in line object\"], \"x\": [1, 2, 3, 4, 5], \"y\": [6, 8, 7, 8, 6], \"type\": \"scatter\", \"uid\": \"310b9cb4-f2f0-4b84-98e3-931f3f759086\"}, {\"hoverinfo\": \"name\", \"line\": {\"shape\": \"vhv\"}, \"mode\": \"lines+markers\", \"name\": \"'vhv'\", \"x\": [1, 2, 3, 4, 5], \"y\": [11, 13, 12, 13, 11], \"type\": \"scatter\", \"uid\": \"fe8b728a-d432-452d-88fe-b057bc2edfbc\"}, {\"hoverinfo\": \"name\", \"line\": {\"shape\": \"hvh\"}, \"mode\": \"lines+markers\", \"name\": \"'hvh'\", \"x\": [1, 2, 3, 4, 5], \"y\": [16, 18, 17, 18, 16], \"type\": \"scatter\", \"uid\": \"86646d7c-54cd-4828-9d69-f8359737d9e4\"}, {\"hoverinfo\": \"name\", \"line\": {\"shape\": \"vh\"}, \"mode\": \"lines+markers\", \"name\": \"'vh'\", \"x\": [1, 2, 3, 4, 5], \"y\": [21, 23, 22, 23, 21], \"type\": \"scatter\", \"uid\": \"1da58d31-b66e-4a38-8dee-41482a309f8f\"}, {\"hoverinfo\": \"name\", \"line\": {\"shape\": \"hv\"}, \"mode\": \"lines+markers\", \"name\": \"'hv'\", \"x\": [1, 2, 3, 4, 5], \"y\": [26, 28, 27, 28, 26], \"type\": \"scatter\", \"uid\": \"f0511e68-b870-4ea7-bdc8-334abfa5f43b\"}], {\"legend\": {\"font\": {\"size\": 15}, \"traceorder\": \"reversed\", \"y\": 0.5}}, {\"showLink\": true, \"linkText\": \"Export to plot.ly\", \"plotlyServerURL\": \"https://plot.ly\"})});</script><script type=\"text/javascript\">window.addEventListener(\"resize\", function(){window._Plotly.Plots.resize(document.getElementById(\"ebbfa27e-4e85-4c40-8bbf-dc485788f418\"));});</script>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "trace1 = go.Scatter(\n",
    "    x=[1, 2, 3, 4, 5],\n",
    "    y=[1, 3, 2, 3, 1],\n",
    "    mode='lines+markers',\n",
    "    name=\"'linear'\",\n",
    "    hoverinfo='name',\n",
    "    # 设置Interpolation的形状\n",
    "    line=dict(shape='linear')\n",
    ")\n",
    "trace2 = go.Scatter(\n",
    "    x=[1, 2, 3, 4, 5],\n",
    "    y=[6, 8, 7, 8, 6],\n",
    "    mode='lines+markers',\n",
    "    name=\"'spline'\",\n",
    "    # 设置显示，这里的text只在第一个点上进行显示\n",
    "    text=[\"tweak line smoothness<br>with 'smoothing' in line object\"],\n",
    "    hoverinfo='text+name',\n",
    "    line=dict(shape='spline')\n",
    ")\n",
    "trace3 = go.Scatter(\n",
    "    x=[1, 2, 3, 4, 5],\n",
    "    y=[11, 13, 12, 13, 11],\n",
    "    mode='lines+markers',\n",
    "    name=\"'vhv'\",\n",
    "    hoverinfo='name',\n",
    "    line=dict(shape='vhv')\n",
    ")\n",
    "trace4 = go.Scatter(\n",
    "    x=[1, 2, 3, 4, 5],\n",
    "    y=[16, 18, 17, 18, 16],\n",
    "    mode='lines+markers',\n",
    "    name=\"'hvh'\",\n",
    "    hoverinfo='name',\n",
    "    line=dict(shape='hvh')\n",
    ")\n",
    "trace5 = go.Scatter(\n",
    "    x=[1, 2, 3, 4, 5],\n",
    "    y=[21, 23, 22, 23, 21],\n",
    "    mode='lines+markers',\n",
    "    name=\"'vh'\",\n",
    "    hoverinfo='name',\n",
    "    line=dict(shape='vh')\n",
    ")\n",
    "trace6 = go.Scatter(\n",
    "    x=[1, 2, 3, 4, 5],\n",
    "    y=[26, 28, 27, 28, 26],\n",
    "    mode='lines+markers',\n",
    "    name=\"'hv'\",\n",
    "    hoverinfo='name',\n",
    "    line=dict(shape='hv')\n",
    ")\n",
    "\n",
    "data = [trace1, trace2, trace3, trace4, trace5, trace6]\n",
    "# traceorder设置legend的显示顺序\n",
    "layout = dict(legend=dict(\n",
    "    y=0.5, \n",
    "    traceorder='reversed', \n",
    "    font=dict(size=15)\n",
    "))\n",
    "fig = dict(data=data, layout=layout)\n",
    "plotly.offline.iplot(fig, filename='line-shapes')"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# Basic Overlaid Area Chart"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 16,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/vnd.plotly.v1+json": {
       "config": {
        "linkText": "Export to plot.ly",
        "plotlyServerURL": "https://plot.ly",
        "showLink": true
       },
       "data": [
        {
         "fill": "tozeroy",
         "mode": "none",
         "type": "scatter",
         "uid": "37f945bd-c537-4443-9941-2b2e147b00ff",
         "x": [
          1,
          2,
          3,
          4
         ],
         "y": [
          0,
          2,
          3,
          5
         ]
        },
        {
         "fill": "tonexty",
         "type": "scatter",
         "uid": "8632bf58-1489-4496-92e6-26724dc519f8",
         "x": [
          1,
          2,
          3,
          4
         ],
         "y": [
          3,
          5,
          1,
          7
         ]
        }
       ],
       "layout": {}
      },
      "text/html": [
       "<div id=\"166da86f-923f-4cbe-a033-e1d55cc1609b\" style=\"height: 525px; width: 100%;\" class=\"plotly-graph-div\"></div><script type=\"text/javascript\">require([\"plotly\"], function(Plotly) { window.PLOTLYENV=window.PLOTLYENV || {};window.PLOTLYENV.BASE_URL=\"https://plot.ly\";Plotly.newPlot(\"166da86f-923f-4cbe-a033-e1d55cc1609b\", [{\"fill\": \"tozeroy\", \"mode\": \"none\", \"x\": [1, 2, 3, 4], \"y\": [0, 2, 3, 5], \"type\": \"scatter\", \"uid\": \"9cb30a90-c740-4186-9c07-e428dd845b82\"}, {\"fill\": \"tonexty\", \"x\": [1, 2, 3, 4], \"y\": [3, 5, 1, 7], \"type\": \"scatter\", \"uid\": \"cee17a1b-429e-4d53-8a26-095684947edc\"}], {}, {\"showLink\": true, \"linkText\": \"Export to plot.ly\", \"plotlyServerURL\": \"https://plot.ly\"})});</script><script type=\"text/javascript\">window.addEventListener(\"resize\", function(){window._Plotly.Plots.resize(document.getElementById(\"166da86f-923f-4cbe-a033-e1d55cc1609b\"));});</script>"
      ],
      "text/vnd.plotly.v1+html": [
       "<div id=\"166da86f-923f-4cbe-a033-e1d55cc1609b\" style=\"height: 525px; width: 100%;\" class=\"plotly-graph-div\"></div><script type=\"text/javascript\">require([\"plotly\"], function(Plotly) { window.PLOTLYENV=window.PLOTLYENV || {};window.PLOTLYENV.BASE_URL=\"https://plot.ly\";Plotly.newPlot(\"166da86f-923f-4cbe-a033-e1d55cc1609b\", [{\"fill\": \"tozeroy\", \"mode\": \"none\", \"x\": [1, 2, 3, 4], \"y\": [0, 2, 3, 5], \"type\": \"scatter\", \"uid\": \"9cb30a90-c740-4186-9c07-e428dd845b82\"}, {\"fill\": \"tonexty\", \"x\": [1, 2, 3, 4], \"y\": [3, 5, 1, 7], \"type\": \"scatter\", \"uid\": \"cee17a1b-429e-4d53-8a26-095684947edc\"}], {}, {\"showLink\": true, \"linkText\": \"Export to plot.ly\", \"plotlyServerURL\": \"https://plot.ly\"})});</script><script type=\"text/javascript\">window.addEventListener(\"resize\", function(){window._Plotly.Plots.resize(document.getElementById(\"166da86f-923f-4cbe-a033-e1d55cc1609b\"));});</script>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "trace0 = go.Scatter(\n",
    "    x=[1, 2, 3, 4],\n",
    "    y=[0, 2, 3, 5],\n",
    "    fill='tozeroy',\n",
    "    mode='none'\n",
    ")\n",
    "trace1 = go.Scatter(\n",
    "    x=[1, 2, 3, 4],\n",
    "    y=[3, 5, 1, 7],\n",
    "    fill='tonexty'\n",
    ")\n",
    "\n",
    "data = [trace0, trace1]\n",
    "plotly.offline.iplot(data, filename='basic-area')"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# Interior Filling for Area Chart"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 17,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/vnd.plotly.v1+json": {
       "config": {
        "linkText": "Export to plot.ly",
        "plotlyServerURL": "https://plot.ly",
        "showLink": true
       },
       "data": [
        {
         "line": {
          "color": "rgb(143, 19, 131)"
         },
         "mode": "lines",
         "type": "scatter",
         "uid": "54f2837a-2f50-4db8-a4b6-9e6436ce63b3",
         "x": [
          1,
          2,
          3,
          4
         ],
         "y": [
          3,
          4,
          8,
          3
         ]
        },
        {
         "fill": "tonexty",
         "line": {
          "color": "rgb(143, 19, 131)"
         },
         "mode": "lines",
         "type": "scatter",
         "uid": "1826843d-41bd-4ae6-a2ae-328e70ed4254",
         "x": [
          1,
          2,
          3,
          4
         ],
         "y": [
          1,
          6,
          2,
          6
         ]
        }
       ],
       "layout": {}
      },
      "text/html": [
       "<div id=\"9dd43955-fa6b-4e9b-b7e4-2040d3361e22\" style=\"height: 525px; width: 100%;\" class=\"plotly-graph-div\"></div><script type=\"text/javascript\">require([\"plotly\"], function(Plotly) { window.PLOTLYENV=window.PLOTLYENV || {};window.PLOTLYENV.BASE_URL=\"https://plot.ly\";Plotly.newPlot(\"9dd43955-fa6b-4e9b-b7e4-2040d3361e22\", [{\"line\": {\"color\": \"rgb(143, 19, 131)\"}, \"mode\": \"lines\", \"x\": [1, 2, 3, 4], \"y\": [3, 4, 8, 3], \"type\": \"scatter\", \"uid\": \"1d22331e-69f8-4958-9171-0fa7e7725012\"}, {\"fill\": \"tonexty\", \"line\": {\"color\": \"rgb(143, 19, 131)\"}, \"mode\": \"lines\", \"x\": [1, 2, 3, 4], \"y\": [1, 6, 2, 6], \"type\": \"scatter\", \"uid\": \"a926b45f-1caa-4240-bb01-726a3bc1984d\"}], {}, {\"showLink\": true, \"linkText\": \"Export to plot.ly\", \"plotlyServerURL\": \"https://plot.ly\"})});</script><script type=\"text/javascript\">window.addEventListener(\"resize\", function(){window._Plotly.Plots.resize(document.getElementById(\"9dd43955-fa6b-4e9b-b7e4-2040d3361e22\"));});</script>"
      ],
      "text/vnd.plotly.v1+html": [
       "<div id=\"9dd43955-fa6b-4e9b-b7e4-2040d3361e22\" style=\"height: 525px; width: 100%;\" class=\"plotly-graph-div\"></div><script type=\"text/javascript\">require([\"plotly\"], function(Plotly) { window.PLOTLYENV=window.PLOTLYENV || {};window.PLOTLYENV.BASE_URL=\"https://plot.ly\";Plotly.newPlot(\"9dd43955-fa6b-4e9b-b7e4-2040d3361e22\", [{\"line\": {\"color\": \"rgb(143, 19, 131)\"}, \"mode\": \"lines\", \"x\": [1, 2, 3, 4], \"y\": [3, 4, 8, 3], \"type\": \"scatter\", \"uid\": \"1d22331e-69f8-4958-9171-0fa7e7725012\"}, {\"fill\": \"tonexty\", \"line\": {\"color\": \"rgb(143, 19, 131)\"}, \"mode\": \"lines\", \"x\": [1, 2, 3, 4], \"y\": [1, 6, 2, 6], \"type\": \"scatter\", \"uid\": \"a926b45f-1caa-4240-bb01-726a3bc1984d\"}], {}, {\"showLink\": true, \"linkText\": \"Export to plot.ly\", \"plotlyServerURL\": \"https://plot.ly\"})});</script><script type=\"text/javascript\">window.addEventListener(\"resize\", function(){window._Plotly.Plots.resize(document.getElementById(\"9dd43955-fa6b-4e9b-b7e4-2040d3361e22\"));});</script>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "trace0 = go.Scatter(\n",
    "    x=[1, 2, 3, 4],\n",
    "    y=[3, 4, 8, 3],\n",
    "    fill= None,\n",
    "    mode='lines',\n",
    "    line=dict(color='rgb(143, 19, 131)')\n",
    ")\n",
    "trace1 = go.Scatter(\n",
    "    x=[1, 2, 3, 4],\n",
    "    y=[1, 6, 2, 6],\n",
    "    fill='tonexty',\n",
    "    mode='lines',\n",
    "    line=dict(color='rgb(143, 19, 131)')\n",
    ")\n",
    "\n",
    "data = [trace0, trace1]\n",
    "plotly.offline.iplot(data, filename='filling-interior-area')"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# Stacked Area Chart"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 18,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/vnd.plotly.v1+json": {
       "config": {
        "linkText": "Export to plot.ly",
        "plotlyServerURL": "https://plot.ly",
        "showLink": true
       },
       "data": [
        {
         "hoverinfo": "x+y",
         "line": {
          "color": "rgb(131, 90, 241)",
          "width": 0.5
         },
         "mode": "lines",
         "stackgroup": "one",
         "x": [
          "Winter",
          "Spring",
          "Summer",
          "Fall"
         ],
         "y": [
          40,
          60,
          40,
          10
         ]
        },
        {
         "hoverinfo": "x+y",
         "line": {
          "color": "rgb(111, 231, 219)",
          "width": 0.5
         },
         "mode": "lines",
         "stackgroup": "one",
         "x": [
          "Winter",
          "Spring",
          "Summer",
          "Fall"
         ],
         "y": [
          20,
          10,
          10,
          60
         ]
        },
        {
         "hoverinfo": "x+y",
         "line": {
          "color": "rgb(184, 247, 212)",
          "width": 0.5
         },
         "mode": "lines",
         "stackgroup": "one",
         "x": [
          "Winter",
          "Spring",
          "Summer",
          "Fall"
         ],
         "y": [
          40,
          30,
          50,
          30
         ]
        }
       ],
       "layout": {}
      },
      "text/html": [
       "<div id=\"855234e7-60b6-49c7-82f2-f4539bff9bcd\" style=\"height: 525px; width: 100%;\" class=\"plotly-graph-div\"></div><script type=\"text/javascript\">require([\"plotly\"], function(Plotly) { window.PLOTLYENV=window.PLOTLYENV || {};window.PLOTLYENV.BASE_URL=\"https://plot.ly\";Plotly.newPlot(\"855234e7-60b6-49c7-82f2-f4539bff9bcd\", [{\"x\": [\"Winter\", \"Spring\", \"Summer\", \"Fall\"], \"y\": [40, 60, 40, 10], \"hoverinfo\": \"x+y\", \"mode\": \"lines\", \"line\": {\"width\": 0.5, \"color\": \"rgb(131, 90, 241)\"}, \"stackgroup\": \"one\"}, {\"x\": [\"Winter\", \"Spring\", \"Summer\", \"Fall\"], \"y\": [20, 10, 10, 60], \"hoverinfo\": \"x+y\", \"mode\": \"lines\", \"line\": {\"width\": 0.5, \"color\": \"rgb(111, 231, 219)\"}, \"stackgroup\": \"one\"}, {\"x\": [\"Winter\", \"Spring\", \"Summer\", \"Fall\"], \"y\": [40, 30, 50, 30], \"hoverinfo\": \"x+y\", \"mode\": \"lines\", \"line\": {\"width\": 0.5, \"color\": \"rgb(184, 247, 212)\"}, \"stackgroup\": \"one\"}], {}, {\"showLink\": true, \"linkText\": \"Export to plot.ly\", \"plotlyServerURL\": \"https://plot.ly\"})});</script><script type=\"text/javascript\">window.addEventListener(\"resize\", function(){window._Plotly.Plots.resize(document.getElementById(\"855234e7-60b6-49c7-82f2-f4539bff9bcd\"));});</script>"
      ],
      "text/vnd.plotly.v1+html": [
       "<div id=\"855234e7-60b6-49c7-82f2-f4539bff9bcd\" style=\"height: 525px; width: 100%;\" class=\"plotly-graph-div\"></div><script type=\"text/javascript\">require([\"plotly\"], function(Plotly) { window.PLOTLYENV=window.PLOTLYENV || {};window.PLOTLYENV.BASE_URL=\"https://plot.ly\";Plotly.newPlot(\"855234e7-60b6-49c7-82f2-f4539bff9bcd\", [{\"x\": [\"Winter\", \"Spring\", \"Summer\", \"Fall\"], \"y\": [40, 60, 40, 10], \"hoverinfo\": \"x+y\", \"mode\": \"lines\", \"line\": {\"width\": 0.5, \"color\": \"rgb(131, 90, 241)\"}, \"stackgroup\": \"one\"}, {\"x\": [\"Winter\", \"Spring\", \"Summer\", \"Fall\"], \"y\": [20, 10, 10, 60], \"hoverinfo\": \"x+y\", \"mode\": \"lines\", \"line\": {\"width\": 0.5, \"color\": \"rgb(111, 231, 219)\"}, \"stackgroup\": \"one\"}, {\"x\": [\"Winter\", \"Spring\", \"Summer\", \"Fall\"], \"y\": [40, 30, 50, 30], \"hoverinfo\": \"x+y\", \"mode\": \"lines\", \"line\": {\"width\": 0.5, \"color\": \"rgb(184, 247, 212)\"}, \"stackgroup\": \"one\"}], {}, {\"showLink\": true, \"linkText\": \"Export to plot.ly\", \"plotlyServerURL\": \"https://plot.ly\"})});</script><script type=\"text/javascript\">window.addEventListener(\"resize\", function(){window._Plotly.Plots.resize(document.getElementById(\"855234e7-60b6-49c7-82f2-f4539bff9bcd\"));});</script>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "x=['Winter', 'Spring', 'Summer', 'Fall']\n",
    "trace0 = dict(\n",
    "    x=x,\n",
    "    y=[40, 60, 40, 10],\n",
    "    hoverinfo='x+y',\n",
    "    mode='lines',\n",
    "    line=dict(width=0.5, color='rgb(131, 90, 241)'),\n",
    "    stackgroup='one'\n",
    ")\n",
    "trace1 = dict(\n",
    "    x=x,\n",
    "    y=[20, 10, 10, 60],\n",
    "    hoverinfo='x+y',\n",
    "    mode='lines',\n",
    "    line=dict(width=0.5, color='rgb(111, 231, 219)'),\n",
    "    stackgroup='one'\n",
    ")\n",
    "trace2 = dict(\n",
    "    x=x,\n",
    "    y=[40, 30, 50, 30],\n",
    "    hoverinfo='x+y',\n",
    "    mode='lines',\n",
    "    line=dict(width=0.5, color='rgb(184, 247, 212)'),\n",
    "    stackgroup='one'\n",
    ")\n",
    "plotly.offline.iplot([trace0, trace1, trace2], filename='stacked-area-plot-hover', validate=False)"
   ]
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Python 3",
   "language": "python",
   "name": "python3"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 3
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython3",
   "version": "3.6.5"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 2
}
